<template>
	<view>
		<view class="container">
			<view class="header">
				<u-avatar size="80" :src="userAvatar" class="avatar"></u-avatar>
				<view class="info">
					<view class="nickname">{{ userName }}</view>
				</view>
			</view>
		</view>
		<u-grid :col="3">
			<u-grid-item>
				<view>0</view>
				<view class="grid-text">连续签到 </view>
			</u-grid-item>
			<u-grid-item>
				<view>0</view>
				<view class="grid-text">累计签到 </view>
			</u-grid-item>
			<u-grid-item>
				<view>0</view>
				<view class="grid-text">最大连续</view>
			</u-grid-item>
		</u-grid>
		<view class="container">
			<view class="extra">

				<view class="feeback" v-for="(item, index) in menuItems" :key="index">
					<image :src="item.icon"></image>
					<button>{{item.text}}</button>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	// 引入vuex
	import {
		mapState
	} from 'vuex';
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				userName: "用户名",
				userAvatar: "",
				menuItems: [{
						icon: "../../static/my/customer-interests.png",
						text: "我的收藏", 
					},
					{
						icon: "../../static/my/time-task.png",
						text: "学习任务",
					},
					{
						icon: "../../static/my/settings.png",
						text: "设置",
					},
				],
			};
		},

		methods: {
			editInfo() {
				// 编辑个人资料的逻辑
			},
			handleMenuItemClick(index) {
				// 处理
			}
		},
		computer: { 
		},
		onShow() {
			this.userName = uni.getStorageSync("nickname");
			this.userAvatar = uni.getStorageSync("avatarUrl");
		}
	}
</script>
<style lang="scss">
	.extra {
		background-color: #fff;
		border-radius: 4rpx;
		font-size: 30rpx;
		width: 100%;

		.feeback {
			padding: 26rpx 32rpx;

			border-bottom: 2rpx #d7f9f4 solid;

			image {
				float: left;
				// margin-top: 18rpx;  
				width: 70rpx;
				height: 70rpx;
			}

			button {
				font-size: 30rpx;
				margin-left: 0;
				padding-left: 10rpx;
				color: #606266;
			}
		}

		.item {
			line-height: 1;
			padding: 30rpx 0 25rpx 20rpx;
			border-bottom: 1rpx solid #eee;
			font-size: 30rpx;
			color: #333;
		}

		button {
			text-align: left;
			background-color: #fff;

			&::after {
				border: none;
				border-radius: 0;
			}
		}
	}

	.container {
		display: flex;
		align-items: center;
		padding: 40rpx;

		.header {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			.avatar {
				margin-left: 10rpx;
			}

			.info {
				display: flex;

				.nickname {
					font-size: 34rpx;
					font-weight: bold;
					margin-bottom: 50px;
					margin-left: 20px;
				}
			}
		}
		 
	}
</style>
